<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/style.css}" />
    <script type="text/javascript" th:src="@{/Hospital/Js/jquery.js}"></script>
    <!--<script type="text/javascript" th:src="../Js/jquery.sorted.js"></script>-->
    <script type="text/javascript" th:src="@{/Hospital/Js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/ckform.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/common.js}"></script>
    <script th:src="@{/Hospital/layer/layer.js}"></script>
 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
</head>
<body>
<form method="post" class="definewidth m20">
<input type="hidden" name="id" value="{$user.id}" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">登录名
            </td>
            <td>
                <input type="text" id="loginName" name="loginName"/>
            </td>
        </tr>

        <tr>
            <td class="tableleft">真实姓名</td>
            <td><input type="text" name="realname" id="realName" value=""/></td>
        </tr>
        <tr>
            <td class="tableleft">邮箱</td>
            <td><input type="text" name="email" id="email" value=""/></td>
        </tr>
        <tr>
            <td class="tableleft">状态</td>
            <td>
                <input type="radio" name="status" id="sta1" value="0" checked/> 启用
              <input type="radio" name="status" id="sta2" value="1" /> 禁用
            </td>
        </tr>
        <tr>
            <td class="tableleft">角色</td>
            <td>
            	<select name="role" id="role">

       			 </select>
        	</td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button class="btn btn-primary" type="button" id="updateInfo">更新</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {       
		$('#backid').click(function(){
				window.location.href="index";
		 });
    });

    //默认加载事件
    $(function (){
        getRoleList();
        getInfoById();
    })

    //解析url
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }

    //获取角色列表
    function getRoleList(){
        $.get("getRoleList",null,function (data){
            let options = '<option value="">--请选择--';
            if (data.status === 1){
                let rolelist = data.list;

                //遍历每个role对象
                rolelist.forEach(function (role,index){
                    let roleId = role.r_id;
                    let roleName = role.r_name;

                    let option = '<option value='+roleId+'>'+roleName+'';
                    options += option;
                })
                $("#role").html(options);
            }
        })
    }

    //通过id获取原始信息
    function getInfoById(){
        //获取url
        let url = document.location.toString();
        let id = url.GetValue("id");
        $.get("getInfoById",{id:id},function (data){
            if (data.status === 1){
                let info = data.list;
                let user = info[0];
                let loginName = user.u_loginName;
                //let passWord = user.u_password;
                let trueName = user.u_trueName;
                let email = user.u_email;
                let state = user.u_state;
                $("#loginName").val(loginName);
                $("#realName").val(trueName);
                $("#email").val(email);

                //选择框需要判断选中,启用状态
                if (state === 0){
                    $("#sta1").attr("checked","checked");
                }else {
                    $("#sta2").attr("checked","checked");
                }

                let role = info[1];
                let roleId = role.r_id;
                $('option[value='+roleId+']').attr("selected","selected");

                let loginName1 = $("#loginName").val();
                //登录名唯一性验证
                $("#loginName").blur(function (){
                    let loginName = $("#loginName").val();
                    if (loginName1 !== loginName){
                        if (loginName === ''){
                            layer.msg("用户名不能为空！")
                        }else {
                            $.get("check", {loginName:loginName},function (data){
                                //输入的用户名存在，则提示重新输入其他
                                if (data.status === 1){
                                    layer.msg(data.msg);
                                }
                            })
                        }
                    }
                })
            }
        })
    }

    //更新数据
    $("#updateInfo").click(function (){
        //获取url
        //获取前端最终数据
        let url = document.location.toString();
        let userId = url.GetValue("id");
        let loginName = $("#loginName").val();
        let realName = $("#realName").val();
        let email = $("#email").val();
        let state = $("input:radio:checked").val();
        let roleId = $('select > option:selected').val();

        if(confirm("确认更新?")){
            //先使用layer,弹出load（提示加载中...）
            const windowId = layer.load();//获取加载框
            $.post("update",{
                userId:userId,
                loginName:loginName,
                realName:realName,
                email:email,
                state:state,
                roleId:roleId
            },function (data){
                //关闭load窗口
                layer.close(windowId);
                //将服务器回复的结果进行显示
                layer.msg(data.msg);

                if (data.status === 1){

                    window.location.href="index";
                }
            })
        }

    })

    //姓名非空验证
    $("#realName").blur(function (){
        let trueName = $("#realName").val();
        if (trueName === ''){
            layer.msg("姓名不能为空！")
        }
    })

    //正规邮箱格式的验证
    $("#email").blur(function (){
        let email = $("#email").val();
        if (email === ''){
            layer.msg("邮箱不能为空！")
        }else {
            //js的正则表达式规则 /表达式匹配规则/  使用test()方法进行匹配，成功返回true
            let pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
            if (!pattern.test(email)){
                layer.msg("邮箱格式不正确！")
            }
        }
    })

</script>
